<template>
    <basic-container>
      <avue-crud
        :option="option"
        :search.sync="search"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @sort-change="sortChange"
        @on-load="onLoad"
      >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      </avue-crud>
    </basic-container>
  </template>
    
  <script>
  import {
    peopleList,
    peopleInfo,
    addPeople,
    delPeople
} from "@/api/rb-merchant/payinvoice/payinvoiceSales";
  import { mapGetters } from "vuex";
  
  export default {
    components: {},
    props: {
      rpiNo: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        form: {},
        query: {},
        search: {},
        active: 0,
        openType: "", //打开dialog弹框的类型
        props: {
          //菜单权限数据 props
          label: "title",
          value: "key",
          disabled: this.isDisabledFn,
        },
        loading: true,
        excelBox: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        selectionList: [],
        peopleType: '2',
        option: {
          height: "calc(50vh - 50px)",
          calcHeight: 30,
          tip: false,
          border: true,
          index: true,
          selection: true,
          searchMenuSpan: 6,
          labelWidth: "150",
          columnBtn: false,
          addBtn: true,
          editBtn: true,
          viewBtn: true,
          delBtn: false,
          column: [
            {
              label: "主键",
              prop: "id",
              type: "input",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: true,
              overHidden: true,
            },
            {
              label: "复核人名称",
              prop: "name",
              type: "input",
              minWidth: 150,
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入复核人名称",
                  trigger: "blur",
                },
              ],
              overHidden: true,
            },
            {
              label: "是否默认",
              prop: "isDefault",
              type: "radio",
              dataType: "string",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              span: 24,
              value: "1",
              dicData: [
                {
                  dictKey: 0,
                  dictValue: "否",
                },
                {
                  dictKey: 1,
                  dictValue: "是",
                },
              ],
              minWidth: 150,
              rules: [
                {
                  required: true,
                  message: "是否默认",
                  trigger: "blur",
                },
              ],
            },
          ],
        },
        data: [],
      };
    },
    computed: {
      ...mapGetters(["permission", "selectMer"]),
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
    },
    created() {},
    methods: {
      rowSave(row, done, loading) {
        addPeople({ ...row, rpiNo: this.rpiNo, type: this.peopleType }).then(
          () => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            done();
          },
          (error) => {
            loading();
            window.console.log(error);
          }
        );
      },
      rowUpdate(row, index, done, loading) {
        addPeople({ ...row, rpiNo: this.rpiNo, type: this.peopleType }).then(
          () => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            done();
          },
          (error) => {
            loading();
            window.console.log(error);
          }
        );
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            return delPeople(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            return delPeople(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        this.openType = type;
        if (["edit", "view"].includes(type)) {
          peopleInfo(this.form.id).then((res) => {
            this.form = res.data.data;
          });
        }
        done();
      },
      /**
       * @func 菜单权限树形是否禁止
       * @desc dialog打开类型为 view 则禁止权限树
       * @param {String} openType - 打开类型
       * */
      isDisabledFn() {
        const _this = this;
        if (["view"].includes(_this.openType)) {
          return true;
        }
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        peopleList(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query, { rpiNo: this.rpiNo, type: this.peopleType })
        ).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      sortChange(val) {
        if (val.order == "ascending") {
          //正序
          this.query.ascs = val.prop;
          this.query.descs = "";
        } else {
          //倒序
          this.query.descs = val.prop;
          this.query.ascs = "";
        }
        this.refreshChange();
      },
    },
  };
  </script>
    
    <style>
  </style>